<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>第6次 实验二 CSS选择器</title>
    <link id="link" href="" type="text/css" rel="stylesheet">

    <style>
        body {text-align: center; }
        li {
            list-style-type: none; float: left; height: 40px; line-height: 40px; width: 40px; border: 1px solid red;
            border-radius: 50%;text-align: center; background-color: white; color: black; margin-right: 5px;
        }
        ul.parent {margin-left: 5px; display: block; height: 190px; }
        ul.child {padding-left: 0; }
        div {margin: 0 auto; width: 550px; min-width: 550px; }
    </style>

</head>
    <body>
        <div>
            <ul>
                <li>01</li>
                <li>02</li>
                <li>03</li>
                <li>04
                    <ul>
                        <li>41</li>
                        <li>42</li>
                        <li>43</li>
                    </ul>
                </li>
                <li>05</li>
                <li>06</li>
                <li>07
                    <ul class="child">
                        <li>71</li>
                        <li>72</li>
                        <li>73</li>
                    </ul>
                </li>
                <li>08</li>
                <li>09</li>
                <li>10</li>
            </ul>
            <br><br>
        </div>
        <div style="padding-top: 500px;">
            <input id="button_1" type="button" value="选择ul的后代ul中的li元素" onClick="a1()" ;>
            <input id="button_2" type="button" value="选择fourth的子、孙元素" onclick="a2()">
            <input id="button_3" type="button" value="选择second后的所有兄弟元素" onclick="a3()">
            <br><br>
            <input id="button_4" type="button" value="选择li的相邻兄弟元素" onclick="a4()">
            <input id="button_5" type="button" value="选择second的相邻兄弟元素" onclick="a5()">
            <input id="button_6" type="button" value="选择second的相邻兄弟的相邻兄弟元素" onclick="a6()">
            <br><br>
        </div>
        <script type="text/javascript">
            function a1() {
            var link = document.getElementById('link');
            link.href = '01.css';
            }
            function a2() {
            var link = document.getElementById('link');
            link.href = '02.css';
            }
            function a3() {
            var link = document.getElementById('link');
            link.href = '03.css';
            }
            function a4() {
            var link = document.getElementById('link');
            link.href = '04.css';
            }
            function a5() {
            var link = document.getElementById('link');
            link.href = '05.css';
            }
            function a6() {
            var link = document.getElementById('link');
            link.href = '06.css';
            }
        </script>
    </body>
</html>